<template>
	<div id="temp">
		<!-- 1.0 提交评论部分 --> 
		<div id="postComs">
			<h3>提交评论</h3>
			<textarea placeholder="请输入您要评论的内容..." v-model="postContent"></textarea>
			<mt-button type="primary" size="large" @click="postComs">发表</mt-button>
		</div>
		
		<!-- 2.0 评论列表部分  -->
		<div id="list">
			<h3 >评论列表</h3>
			<dl v-for="(item, index) in list">
				<dt>
					<span>第{{index + 1}}楼:</span>
					<span>用户: {{item.user_name}}</span>
					<span>发表时间: {{item.add_time | datefmt('YYYY-MM-DD')}}</span>
				</dt>
				<dd>{{item.content}}</dd>
			</dl>
		</div>
		
		<!-- 点击加载更多显示更多数据 -->
		<mt-button type="danger" @click="getMore" size="large" plain>加载更多</mt-button>
	</div>
</template>

<script>
	//引入mint-ui的某一个js组件
	import { Toast } from 'mint-ui';
	export default {
		props: ['id'],
		data() {
			return {
				postContent: '',//双向数据绑定 获取用户输入的评论内容
				list: [], //存放所有评论数据
				pageindex: 1  //评论内容的分页页码  默认是1
			}
		},
		created() {
			//进入页面就自动加载评论区的内容(默认是显示第一页的评论)
			this.getComsList(this.pageindex);
			//console.log(this.id);
		},
		methods: {
			//点击加载更多时增加显示当前页下一页的内容
			getMore() {
				//将页数自增
				this.pageindex++;
				//重新获取评论列表
				this.getComsList(this.pageindex);
			},
			//获取评论列表
			getComsList(pageindex) {  
				pageindex = pageindex || 1;
				var url = this.$common.apidomain + '/api/getcomments/' + this.id + '?pageindex=' + pageindex;
				this.$http.get(url).then(function (res) {
					//console.log(res);
					if (res.body.status != 0) {
						Toast(res.body.message);
						return;
					}
					//将获取的数据拼接到组件的list数组中(方便加载时的操作 加载时是将获取的数据拼接起来再显示的)
					this.list = this.list.concat(res.body.message);
					//console.log(this.list);
				});
			},
			//提交评论内容
			postComs() {  
				//获取url
				var url = this.$common.apidomain + '/api/postcomment/' + this.id;
				//console.log(url);
				//获取参数 ->>评论内容
				this.$http.post(url, {content: this.postContent}, {emulateJSON: true})
				.then(function (res) {
					//判断评论内容是否为空
					if (this.postContent.trim().length <= 0) {
						Toast('请输入评论内容');
						return;
					}
					//评论内容不为空  可以提交数据
					Toast(res.body.message);
					
					//将当前添加的评论内容手动添加到评论列表的最前面
					//list被修改  v-for会自动重新渲染
					this.list = [{
						add_time: new Date(),
						content: this.postContent,
						user_name: "匿名用户"
					}].concat(this.list);
					
					//清空评论区的内容
					this.postContent = '';
				})
			}
		}
	}
</script>

<style scoped>
	#temp {
		padding: 5px;
	}
	
	/* 提交评论部分样式 */
	#postComs h3,
	#list h3 {
		padding-bottom: 8px;
		border-bottom: 1px solid rgba(0, 0, 0, .3);
	}
	#postComs textarea {
		margin-bottom: 10px;
	}
	
	/* 评论列表部分样式 */
	#list {
		margin-top: 20px;
		margin-bottom: 5px;
	}
	#list dl{
		margin: 0;
		padding: 0;
	}
	#list dl dd {
		margin-left: 30px;
		font-size: 18px;
		padding: 10px 0;
	}
	#list dl dt {
		padding: 5px;
		background-color: rgba(0, 0, 0, .1);
		border-radius: 3px;
		color: #6d6d72;
    	font-size: 15px;
	}
	#list dl:last-of-type {
		border-bottom: 1px solid rgba(0, 0, 0, .2);
	}
</style>